/*
 * @Author: yuanxiang 
 * @Date: 2018-05-11 10:45:59 
 * @Last Modified by: hy
 * @Last Modified time: 2018-06-21 15:44:30
 */
<template>
    <div class="sellReceivables">
      <el-row type="flex">
        <div class="topLeftCon">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
          <div class="itemTop">
                <div class="itemTopText">应收总账款 (元)</div>
                <b class="boldFont">
                  <i-count-up :startVal="startVal" :endVal="need_allnums" :decimals="decimals" :duration="duration" :options="options" />
                </b>
          </div>
          </el-col>
        </div>
        <div class="topRightCon marginLeft-20">
        	<el-row type="flex" justify="space-between" style="width:100%">
        		<el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" class="minTopLeftCon">
              <chart-lay-out>
                <div slot="title">分公司应收账款</div>
                <bar-chart slot="main" v-model="sumProcurementArr" :option="sumProcurementOption"></bar-chart>
              </chart-lay-out>
        			<!-- <div class="topRightLLine">
        				<div class="topRightLTopTitleLine"></div>
        				<span class="topRightLTopTitle">分公司应收账款</span>
        			</div>
        			<chart :chartStyle="'min-height:230px;height:330px'" :option="sumProcurementOption" />
        			<div class="chartLine"></div> -->
        		</el-col>
        		<!-- <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
        			<div class="topRightLLine">
        				<div class="topRightLTopTitleLine">
        				</div>
        				<span class="topRightLTopTitle">账户类型</span>
        			</div>
        			<chart :chartStyle="'min-height:230px;height:330px'" :option="warehousedaySaleArr" />
        			<div class="chartLine"></div>
        		</el-col> -->
        		<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="minTopLeftCon">
              <chart-lay-out>
                <div slot="title">客户类型</div>
                <pie-chart slot="main" v-model="daySaleArr"></pie-chart>  
              </chart-lay-out>
              <!-- <div class="topRightLLine">
        				<div class="topRightLTopTitleLine">
        				</div>
        				<span class="topRightLTopTitle">客户类型</span>
        			</div> -->
        			<!-- <chart :chartStyle="'min-height:230px;height:330px'" :option="daySaleArr" /> -->
        		</el-col>
        	</el-row>
        </div>
      </el-row>
      <el-row type="flex" class="marginBot-20">
        <div class="midCon">
        	<div class="changeCen-right-tableData">
        		<b style="color: #2ff0d2; font-size: 20px;"><i class="changeCen-i"></i>业绩详情</b>
              <el-col class="elTableStyle tableStyle">
                <el-table 
                  max-height="620"
                  :data="tableData" 
                  :row-style="{background:'transparent',height:'60px'}"
                  :cell-style="{border:0}"
                  :header-row-style="{align:'center',background:'transparent',color:'#2ff0d2'}"
                  :header-cell-style="{align:'center',background:'transparent',borderBottom:'1px solid rgba(47, 240, 210,0.5)'}"
                  > 
                    <el-table-column label="事业部" prop="departmentName" align="center" header-align="center">
                    </el-table-column>
                    <el-table-column label="客户经理" prop="employeeName" align="center" header-align="center">
                    </el-table-column>
                    <el-table-column label="客户名称" prop="customerShortName" align="center" header-align="center">
                    </el-table-column>
                    <el-table-column label="应收账款" prop="noPay" align="center" header-align="center">
                    </el-table-column>
                    <el-table-column label="账龄" prop="zhangPeriod" align="center" header-align="center">
                    </el-table-column>
                  </el-table>
              </el-col>
        	</div>
        </div>
      </el-row>
    </div>
</template>
<script>
import barChart from "@/components/Charts/barChart";
import chartLayOut from "@/components/Charts/chartLayOut";
import chart from "@/components/Charts/newChart";
import pieChart from "@/components/Charts/pieChart";
import ICountUp from "vue-countup-v2";
import { GetDataByTarget, GetAccountsReceivableDetail } from "@/api/gq/index";
import echarts from "echarts";
import bgLayOut from "@/components/bgLayOut/index";
import myTable from "@/components/branch/myTable";
export default {
  name: "sellAnalysis",
  components: {
    barChart,
    chart,
    ICountUp,
    bgLayOut,
    myTable,
    pieChart,
    chartLayOut
  },
  //  props: ["time"],
  //  watch: {
  //    time(res){
  //      this.time = res
  //      this.fetchData()
  //    }
  //  },
  data() {
    return {
      sumProcurementArr: [],
      isTest: this.$utils.gqIsTestFalse, //   是否测试数据 ture  测试数据  false 正式数据
      tableData: [],
      tableHeads: [
        { key: "departmentName", name: "分公司名称" },
        { key: "customerShortName", name: "客户经理" },
        { key: "employeeName", name: "客户名称" },
        { key: "noPay", name: "应收账款" },
        { key: "zhangPeriod", name: "账龄" }
      ],
      sumProcurementOption: { // 分公司应收账款
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        }
      },
      // warehousedaySaleArr: {}, // 账户类型
      daySaleArr: [], // 客户类型
      itemW: 0,
      offsetL: 0,
      nowId: 0,
      workNum: 0,
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      topNav: [
        {
          name: "浩得钢圈驾驶舱",
          id: ""
        },
        {
          name: "销售分析",
          id: "9003"
        },

        {
          name: "应收账款",
          id: "9005"
        },
        {
          name: "库存/差价",
          id: "9007"
        }
      ],
      need_allnums: 0,
      sell_allnums: 62433498,
      storesIncome: true // 选中状态
      //  storeId: ""
    };
  },
  mounted() {
    this.fetchData(); // 获取数据
    //  this.storeId = this.$route.query.storeId;
    this.onNav("", 0);
  },
  methods: {
    async fetchProcurementDetail() {
      try {
        var params = {
          customerType: "",
          isTest: this.isTest
        };
        var res = await GetAccountsReceivableDetail(params);
        if (res.data.code === "0") {
          this.tableData = res.data.result;
        }
      } catch (e) {
        console.log(e);
      }
    },
    formatterPieTwo(res, params, unit) {
      var minResult = "";
      if (res[0].list) {
        res[params.dataIndex].list.forEach((item, id) => {
          var minItem =
            "<div style='display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px'><span>" +
            item.name +
            "</span><span style='margin-top:2px;font-size:20px;font-family:DIN Condensed Bold'>" +
            item.value +
            "</span></div>";
          minResult += minItem;
        });
      }
      var val = params.data.value;
      var imgConStart =
        "<div style='display:flex;padding:15pt 12pt 12pt 12pt;color:" +
        params.color +
        ";flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px;'>" +
        "<span style='width:100%;font-size:30px;font-family:DIN Condensed Bold'>" +
        val +
        "</span>" +
        "<div style='width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt;font-size:12px'>";

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    // 分公司应收账款
    async fetchSumProcurement() {
      try {
        var params = {
          statisticalTime: this.time,
          queryType: "24002",
          isTest: this.isTest
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          this.$set(this, "need_allnums", res.data.result.total);
          // var data = res.data.result.list;
          // var unit = "应收账款 (万元)";
          // var option = this.returnBarOption(data, unit, "#31cee6", "#6937fd");
          // this.$set(this, "sumProcurementOption", option);
          this.$set(this, "sumProcurementArr", res.data.result.list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 账户类型统计
    //   async fetchWarehouseDaySale() {
    //       try {
    //        var params = {
    //          statisticalTime: this.time,
    //          queryType: "24013",
    //          isTest: this.isTest
    //        };
    //        var res = await GetDataByTarget(params);
    //        if (res.data.code === "0") {
    //           var unit = "个";
    //            var colorArr = ["cyan", "#0080FF"];
    //            var data = res.data.result.list
    //            this.setPieOption("warehousedaySaleArr", data, unit, "10%", colorArr);
    //        }
    //      } catch (e) {
    //        console.log(e);
    //      }
    //    },
    //  客户类型统计
    async fetchDaySale() {
      try {
        var params = {
          statisticalTime: this.time,
          queryType: "24012",
          isTest: this.isTest
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var data = res.data.result.list;
          this.$set(this, "daySaleArr", data);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // unit:单位  startColor:开始的颜色  endColor:结束的颜色
    returnBarOption(res, unit, startColor, endColor) {
      var xData = [];
      var symbolClip = true;
      var max = 0;
      var data1 = {
        type: "bar",
        name: "",
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: startColor,
              fontWeight: "bold",
              fontFamily: "DIN Condensed Bold",
              fontSize: "22"
            }
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: [30, 30, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: startColor
              },
              {
                offset: 1,
                color: endColor
              }
            ])
          }
        },
        z: 10,
        symbolBoundingData: max,
        data: [],
        barWidth: 21
      };
      res.forEach(item => {
        xData.push(item.name);
        var obj = {};
        max = Number(item.value) > max ? Number(item.value) : max;
        obj.value = item.value;
        obj.symbolClip = symbolClip;
        data1.data.push(obj);
      });
      data1.symbolBoundingData = max;
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          name: unit,
          nameGap: 30,
          nameTextStyle: {
            color: "#31cee6"
          }
        },
        legend: {
          show: false
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.formatterModal(res, params, unit)
        },
        grid: {
          bottom: "20%",
          left: "15%"
        },
        series: [data1]
      };
      return option;
    },
    onNav(itemId, id) {
      this.nowId = id;
      this.groupPlate = itemId;
      var itemW = this.$refs["item" + id][0].offsetWidth - 10;
      var itemL = this.$refs["item" + id][0].offsetLeft + 5; // 当前元素距离父节点的左边 水平距离 ,距离父节点的偏移量
      this.$set(this, "offsetL", itemL);
      this.$set(this, "itemW", itemW);
      this.fetchData(); // 获取数据
    },
    formatterModal(res, params, unit, color) {
      var minResult = "";
      if (res[0].list) {
        res[params[0].dataIndex].list.forEach(item => {
          var minItem =
            '<div style="display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px"><span>' +
            item.name +
            '</span><span style="margin-top:2px;font-size:20px;font-family:DIN Condensed Bold">' +
            item.value +
            "</span></div>";
          minResult += minItem;
        });
      }
      var index = params[0].dataIndex;
      var val = res[index].value;
      var nowColor = color || "#31cee6";
      var imgConStart =
        '<div style="display:flex;padding:12pt 10px;color:' +
        nowColor +
        ';flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px;">' +
        '<span style="width:100%;font-size:30px;padding:8pt 0 0 0 ;font-family:DIN Condensed Bold">' +
        val +
        "</span>" +
        '<div style="width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt;font-size:12px">';

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    // 获取数据
    fetchData() {
      // 客户类型统计
      this.fetchDaySale();
      // 账户类型统计
      //  this.fetchWarehouseDaySale();
      // 分公司应收账款
      this.fetchSumProcurement();
      this.fetchProcurementDetail();
    },
    // 跳页面
    pushPage(name) {
      this.$router.push({
        path: name
      });
    }
  }
};
</script>
<style lang="scss">
@import "../main.css";
@import "../../../../styles/element-ui/tableStyle.scss";
.elTableStyle {
  .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
  }
}
.sellReceivables {
  .tableStyle
    .el-table--enable-row-hover
    .el-table__body
    tr:hover
    > td:first-child,
  .tableStyle
    .el-table--enable-row-hover
    .el-table__body
    tr:hover
    > td:last-child {
    border-radius: 0;
  }
}
</style>

<style scoped lang="scss">
.sellReceivables {
  .el-table {
    color: #2ff0d2;
  }

  .topLeftCon {
    display: flex;
    margin-left: 2px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    background-image: url("../../../../../static/img/bigData4/board_s.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 373px;
    height: 393px;
    color: #2ff0d2;
  }
  .itemTopText {
    font-size: 20px;
    margin-left: 10px;
  }
  .bottomSelBtn {
    margin-right: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .bottomSelBtn .storeUnActive .el-button {
    background: transparent;
    border: 0;
    color: #1776fd;
  }
  .bottomSelBtn .storeActive .el-button {
    background: #1776fd;
    border: 1px solid #1776fd;
    color: black;
  }

  .topLeftItem .itemTop {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    color: #2ff0d2;
  }
  .topLeftItem .itemTopIcon {
    width: 20px;
    height: 21px;
  }
  .topLeftItem {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 38px;
    margin-left: 106px;
  }
  .topLeftItem:first-child {
    margin-left: 0px;
  }

  .topLeftItem:nth-child(4) {
    margin-left: 0px;
  }

  .lineImg {
    width: 1712px;
    height: 8px;
    background-image: url("../../../../../static/img/bigData4/minLine.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #2ff0d2;
  }

  /*.lineCon {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}*/
  .chartLine {
    width: 1px;
    height: 332px;
    background: rgba(49, 206, 230, 0.2);
    position: absolute;
    right: 0;
    top: 10%;
  }
  .minTopLeftCon {
    position: relative;
    margin-top: 10px;
  }
  .midCon {
    display: flex;
    margin-top: 20px;
    padding: 60px;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 792px;
    background-image: url("../../../../../static/img/bigData4/board_xl.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #2ff0d2;
  }
  .topRightLLine {
    display: flex;
    align-items: center;
    margin-left: 36pt;
    margin-top: 12pt;
  }
  .topRightLTopTitle {
    font-size: 20px;
    margin-left: 6pt;
  }
  .topRightLTopTitleLine {
    width: 3px;
    height: 14px;
    margin-top: 6px;
    background: #2ff0d2;
  }
  /*.topRightCon span {
  font-size: 50px;
  line-height: 60px;
  margin-top: 2px;
}*/
  .topLeftCon span {
    font-size: 50px;
    line-height: 60px;
    margin-top: 2px;
  }
  .topRightCon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
    background-image: url("../../../../../static/img/bigData4/board_m.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 1446px;
    height: 393px;
    color: #2ff0d2;
  }
  .topBottomLines {
    bottom: -6pt;
    transition: left 0.5s;
    left: 0;
    height: 3px;
    background: #31cee6;
    position: absolute;
  }

  .active {
    font-weight: bold;
  }
  .topNavaArrItem {
    display: flex;
    color: rgba(49, 206, 230, 0.8);
    font-size: 18px;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px;
    height: 16px;
    border-left: 1px solid rgba(49, 206, 230, 0.2);
  }
  .topNavaArrItem:nth-child(1) {
    border-left: 0;
  }
  .topNavs {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12pt;
  }
  .topNavArr {
    width: 100%;
    display: flex;
    height: 79px;
    align-items: flex-end;
    justify-content: center;
  }
  .itemTop {
    text-align: center;
    color: #2ff0d2;
  }
  .changeCen-right-tableData-content {
    position: relative;
  }
  .changeCen-right-tableData-content:after {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    width: 1px;
    height: 730px;
    background-color: rgba(47, 240, 210, 0.3);
  }
  .changeCen-right-tableData-content p {
    display: flex;
    margin-top: 40px;
    margin-bottom: 0;
    color: #2ff0d2;
    font-size: 18px;
    border-bottom: 1px solid rgba(47, 240, 210, 0.3);
  }
  .changeCen-right-tableData-content p span {
    width: calc(100% / 5);
    height: 62px;
    line-height: 62px;
    text-align: center;
  }
  .changeCen-right-tableData-content-list {
    padding-top: 34px;
    padding-bottom: 34px;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
  }
  .changeCen-right-tableData-content-list li {
    display: flex;
    margin-bottom: 34px;
    color: #2ff0d2;
    font-size: 18px;
  }
  .changeCen-right-tableData-content-list li span {
    width: calc(100% / 5);
    text-align: center;
  }
  .changeCen-i {
    display: inline-block;
    width: 3px;
    height: 14px;
    margin-top: 6px;
    margin-right: 6px;
    background-color: #2ff0d2;
  }
}
</style>
